<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <link rel="stylesheet" href="bower_components/tether/dist/css/tether.min.css">
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="bower_components/ng-ckeditor/ng-ckeditor.css">
    <link rel="stylesheet" href="bower_components/angular-ui/build/angular-ui.min.css">
    <link rel="stylesheet" href="bower_components/AngularJS-Toaster/toaster.min.css">
    <link rel="stylesheet" href="bower_components/angular-bootstrap/ui-bootstrap-csp.css">

    <link type="text/css" href="codes.css" rel="stylesheet">
</head>
<body ng-controller="DemoController as vm">
    <!-- Main Navigation -->
    <nav class="navbar navbar-light bg-faded">
        <a class="navbar-brand" href="#">caxy/php-htmldiff</a>
        <ul class="nav navbar-nav">
            <li class="nav-item active">
                <a class="nav-link" href="#">Demo <span class="sr-only">(current)</span></a>
            </li>
        </ul>
    </nav>

    <!-- Main Content -->
    <div class="container-fluid">
        <!-- diff controls and input -->
        <div class="card">
            <div class="card-header">
                <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffControls">
                    <i class="fa fa-compress"></i>
                </button>
                Diff Controls

                <div class="pull-right">
                    <div ng-if="vm.currentDemo">
                        <p>
                            Current Demo: {{ vm.currentDemo.name }}
                            <button ng-if="!vm.currentDemo.isOverride" type="button" class="btn btn-primary btn-sm" ng-click="vm.updateDemo()">
                                Update Demo
                            </button>
                        </p>
                    </div>
                </div>
            </div>
            <div class="card-block collapse in" id="diffControls">
                <!-- Diff controls -->
                <div class="form-inline row">
                    <!-- Reset button -->
                    <div class="btn-group" role="group">
                        <button type="button" class="btn btn-sm btn-danger-outline" ng-click="vm.reset()">RESET</button>
                    </div>

                    <!-- Load demo buttons w/ dropdowns -->
                    <div class="btn-group" role="group">
                        <div class="btn-group btn-group-sm">
                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Load Custom Demo
                            </button>
                            <div class="dropdown-menu">
                                <a href ng-repeat="demo in vm.demos" type="button" class="dropdown-item" ng-class="{active: demo == vm.currentDemo}" ng-click="vm.diffDemo($index)">
                                    {{ demo.name }}
                                </a>
                            </div>
                        </div>
                        <div class="btn-group btn-group-sm" role="group">
                            <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Load Diff Override Demo
                            </button>
                            <div class="dropdown-menu">
                                <a href class="dropdown-item" ng-repeat="override in vm.overrides" ng-class="{active: vm.currentDemo == override}" ng-click="vm.diffOverride(override, $index)">
                                    Override Demo {{ $index + 1 }}
                                </a>
                            </div>
                        </div>
                    </div>

                    <!-- Load table diff button and input -->
                    <div class="form-group">
                        <div class="input-group input-group-sm" role="group">
                            <span class="input-group-btn">
                                <button ng-click="vm.diffTableDemo(vm.tableDiffNumber)" type="button" class="btn btn-secondary">Load Table Diff</button>
                            </span>
                            <input type="number" class="form-control" ng-model="vm.tableDiffNumber" />
                        </div>
                    </div>

                    <!-- Match Threshold -->
                    <div class="form-group">
                        <label for="matchThreshold">Match Threshold</label>
                        <input type="number" class="form-control form-control-sm" ng-model="vm.matchThreshold" id="matchThreshold" ng-change="vm.update()">
                    </div>

                    <!-- Table Diffing Checkbox -->
                    <div class="form-group">
                        <label class="checkbox-inline" for="tableDiffing">
                            <input type="checkbox" ng-model="vm.tableDiffing" id="tableDiffing" ng-change="vm.update()"> Use Table Diffing
                        </label>
                    </div>

                    <!-- Swap Text Button -->
                    <button type="button" class="btn btn-secondary btn-sm" ng-click="vm.swapText()">Swap Text</button>

                    <!-- Save as New Demo -->
                    <div class="form-group">
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control" placeholder="Demo Name" ng-model="vm.diffName" />
                            <span class="input-group-btn">
                                <button class="btn btn-secondary" type="button" ng-click="vm.saveNewDemo()">Save as New Demo</button>
                            </span>
                        </div>
                    </div>
                </div><!-- end of diff controls -->

                <!-- Diff Inputs (Old Text / New Text) -->
                <div class="form-group row m-t-2">
                    <div class="col-sm-6">
                        <label class="form-control-label" for="oldText">
                            Old Text
                            <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#oldText">
                                <i class="fa fa-clipboard"></i>
                            </button>
                            <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
                        </label>
                        <div ng-if="vm.ckEditorEnabled">
                            <textarea ckeditor="vm.editorOptions" ng-model="vm.oldText" id="oldText" ng-change="vm.update()"></textarea>
                        </div>
                        <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.oldText" name="old_text" ng-change="vm.update()" rows="15"></textarea>
                    </div>
                    <div class="col-sm-6">
                        <label class="form-control-label" for="newText">
                            New Text
                            <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#newText">
                                <i class="fa fa-clipboard"></i>
                            </button>
                            <a ng-click="vm.toggleCkEditor()">Toggle CK</a>
                        </label>
                        <div ng-if="vm.ckEditorEnabled">
                            <textarea ckeditor="vm.editorOptions" ng-model="vm.newText" id="newText" ng-change="vm.update()"></textarea>
                        </div>
                        <textarea ng-if="!vm.ckEditorEnabled" class="form-control" ng-model="vm.newText" name="new_text" ng-change="vm.update()" rows="15"></textarea>
                    </div>
                </div><!-- end of diff inputs -->
            </div><!-- end of diff controls card-block -->
        </div><!-- end of diff controls card -->

        <!-- Diff Output -->
        <div class="card">
            <div class="card-header">
                <div class="btn-group">
                    <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#diffBlock">
                        <i class="fa fa-compress"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#diffPreview">
                        <i class="fa fa-clipboard"></i>
                    </button>
                    <button type="button" class="btn btn-sm btn-secondary" ng-click="vm.update()">
                        <i class="fa fa-refresh"></i>
                    </button>
                </div>
                Diff Output
                <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
            </div>
            <div class="card-block collapse in" id="diffBlock">
                <div class="form-group row">
                    <div class="col-sm-12">
                        <div id="diffPreview" class="html-preview" ng-bind-html="vm.trustHtml(vm.diff)"></div>
                    </div>
                </div>
            </div>
        </div><!-- end of diff output -->

        <!-- Diff Output (HTML) -->
        <div class="card">
            <div class="card-header">
                <button class="btn btn-secondary btn-sm" type="button" data-toggle="collapse" data-target="#rawDiffBlock">
                    <i class="fa fa-compress"></i>
                </button>
                <label class="form-control-label" for="rawDiff">
                    Diff Output (HTML)
                    <button type="button" class="btn btn-sm btn-secondary clipboard" data-clipboard-target="#rawDiff">
                        <i class="fa fa-clipboard"></i>
                    </button>
                </label>
                <span ng-show="vm.loading || vm.waiting">- {{ vm.loading ? 'Loading' : 'Waiting' }}...</span>
            </div>
            <div class="card-block collapse" id="rawDiffBlock">
                <div class="form-group row">
                    <div class="col-sm-12">
                        <textarea id="rawDiff" class="form-control" ng-model="vm.diff" name="diff" readonly ng-change="vm.update()" rows="15"></textarea>
                    </div>
                </div>
            </div>
        </div><!-- end of diff output (html) -->

        <!-- Debug Output -->
        <div class="row">
            <div class="col-sm-6">
                <h3>Debug Output</h3>
                <div class="card" ng-repeat="(category, categoryMessages) in vm.debugOutput track by category">
                    <div class="card-header">
                        <h5>
                            <a ng-click="categoryMessages.isCollapsed = !categoryMessages.isCollapsed">
                                {{ category }}
                            </a>
                        </h5>
                    </div>
                    <div class="card-block" uib-collapse="categoryMessages.isCollapsed">
                        <pre ng-repeat="message in categoryMessages.messages track by $index">
                            {{ message }}
                        </pre>
                    </div>
                </div>
            </div>
            <div class="col-sm-6" ng-show="vm.legislativeOverride">
                <h3>Legislative Override</h3>
                <div class="html-preview" ng-bind-html="vm.trustHtml(vm.legislativeOverride)"></div>
            </div>
        </div><!-- end of debug output -->
    </div><!-- end of outer container div -->

    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/tether/dist/js/tether.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/angular/angular.min.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.min.js"></script>
    <script src="bower_components/clipboard/dist/clipboard.min.js"></script>
    <script src="bower_components/ckeditor/ckeditor.js"></script>
    <script src="bower_components/ng-ckeditor/ng-ckeditor.min.js"></script>
    <script src="bower_components/angular-ui/build/angular-ui.min.js"></script>
    <script src="bower_components/angular-animate/angular-animate.min.js"></script>
    <script src="bower_components/AngularJS-Toaster/toaster.min.js"></script>
    <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.min.js"></script>

    <script type="text/javascript" src="demo.module.js"></script>
    <script type="text/javascript" src="demo.controller.js"></script>

    <script>
        new Clipboard('.clipboard');
    </script>
</body>
</html>
